<template>
  <div class="app">
      <div class="left">
           <img src="../assets/cover.jpg"  style="max-width: 100vw;height: 98vh;margin-left: 8vh;"/>
      </div>
      <div class="right">
        <div class="login-form" @keyup.enter="inputInfo">
                <div style="width: 25vw;">
                  <img src="../assets/logo.png" style="max-width: 100%; "/>
                </div>
              <div class="title">sky管理系统</div>
              <div class="form">
                <div style="font-size: 18px;color: #fff;font-weight: bolder;">用户登录</div>
                <el-input v-model="username" placeholder="请输入用户名" class="username"/>
                <el-input
                    v-model="password"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                    class="password"
                  />
              </div>
              
              <div class="button">
                <el-button type="primary" @click="inputInfo" class="login">登录</el-button>
              </div>
              <div class="button">
                <el-button type="info" @click="open2" v-on:click="resetInfo" class="rest">重置</el-button>
              </div>
              <div class="desc">
                <img src="../assets/img/zuo.png" style="width:50px;height:15px;">
                 <span style="color: #fff;">车联网+视频监控</span> 
                <img src="../assets/img/you.png" style="width:50px;height:15px;">
              </div>
            </div>
      </div>
  </div>

</template>
  
<script>
import { ElButton, ElNotification } from 'element-plus';

import router from '../router/index'
import api from '../api/api'
export default {
  name: "UserLogin",
  components: {
    ElButton
  },
  data: function () {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    inputInfo: function () {
      api.getLogin(this.username, this.password)
        .then(
          res => {
            if (res.code==0) {
              localStorage.setItem("token", res.data), 
              localStorage.setItem("name",this.username)
              router.push("/Control")
            }else{
              ElNotification({title: 'Error',message: '账号密码错误',type: 'error',}) 
            }

          },
          err => console.log(err)
        ).catch(
          err => console.log(err)
        );
    },


    resetInfo: function () {
      this.username = ''
      this.password = ''
    },
    open2: function () {
      if (this.username != '' || this.password != '') {
        ElNotification({
          title: 'Success',
          message: '用户名和密码将被清空',
          type: 'success',
        });
        return;
      } else {
        ElNotification({
          title: 'Error',
          message: '请不要重复此操作',
          type: 'error',
        });
      }

    }
  }
}
</script>
  
<style scoped>
*{
  padding: 0px;
  margin: 0px;
}
.app {
  width: 100vw;
  height: 100vh;
  background-color: #8fe2f7;
}


.left{
  float: left;
}
.right{
  background-color: #67c8e0;
  width:25vw;
  height: 100vh;
  float: right;
  box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
  text-align: center;
}
.login-form{
  text-align: center;
  margin-top: 10%;
}

.title{
  text-align: center;
  margin-top: 10%;
  background-color: #556449;
  color: #E8FFD3;
  width: 19vw;
  height: 50px;
  margin-left: 3vw;
  font-size: 20px;
  line-height: 50px;
  border-radius: 100px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
}
.form {
  margin-top: 50px;
}
.username{
  margin-top: 20px;
  width: 19vw;
  margin-left: auto;
  height: 40px;
  border-radius: 10px;
}
.password{
  margin-top: 20px;
  width: 19vw;
  height: 40px;
  border-radius: 10px;
}
.button{
  margin-top: 20px;
}
.login{
  width: 19vw;
  height: 40px;
  background-color: #2E5AB7;
}
.rest{
  width: 19vw;
  height: 40px;
  background-color: rgb(86, 86, 87);
}
.desc{
  text-align: center;
  margin-top: 10vh;
  height: 40px;
}
</style>
  